<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>留言墙</title>
  <link type="text/css" rel="stylesheet" href="css/MyCss.css" />
  <style>
	*{margin: 0; padding: 0;}
	.message_wall {width: 800px; background: #555; border: 8px solid #ddd; border-radius: 10px; margin: 80px auto; overflow: hidden; position: relative; }

	.clickMe {position: absolute; width: 48px; height: 48px; left: 0; bottom: 0; cursor: pointer; z-index: 9; background: #ccc; text-align: center; color: #fff; background:url(img/message.png) no-repeat;}
	.message {position: absolute; border-radius: 5px; background: #555; z-index: 10; left: 49px; top: 324px; display: none; padding: 20px; border: 1px solid #fff;}  
		.input-button {margin-top: 23px; margin-left: 23px;}
	.wall_content {position: relative; width: 800px; height: 500px;}
		/*
		transform: rotate(10deg); left: 331.576px; top: 351.576px;
		*/
		.ui-draggable {position: absolute; z-index: 99; cursor: pointer; width: 57px; height: 52px; padding: 15px 5px 5px 10px; background: url(img/note.png) no-repeat; font-size: 12px; z-index: 6; overflow: hidden;}
		
		.wall_content .note-1 {background-position: -1px -440px; color: #494000;}
		.wall_content .note-2 {background-position: -110px -440px; color: #561e67;}
		.wall_content .note-3 {background-position: -220px -440px; color: #07516f;}
		.wall_content .note-4 {background-position: -329px -440px; color: #652f09;}
		.wall_content .note-5 {background-position: 0 -550px; color: #6b0f13;}
		.wall_content .note-6 {background-position: -110px -550px; color: #034914;}
	
  </style>
 </head>
 <body>
	<div class="message_wall">
		<div class="clickMe"></div>
		<div class="message">
			<input class="text input-text" type="text" />
			<input class="sure btn-success input-button ripple" type="button" value="发送留言" />
		</div>
		<div class="wall_content">
		</div>
	</div>
	<script src="js/MyjsV0-8.js"></script>
	<script>
		var arr = ["到此一游。。。","踩过了。。。","路过。。。","我又来了","哈哈哈哈哈"];
		//创建模板
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
		$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text(arr[Num_ran(0, 4)]).appendTo($(".wall_content").eq(0));
	
		$(".wall_content").eq(0).childs().forEach(function(e){
			e.css("left: "+Num_ran(40, 740)+"px; top: "+Num_ran(50, 420)+
						"px; transform: rotate("+Num_ran(-20, 20)+"deg); z-index: 6;");
		});
		
		/*
		//动画函数 写入留言
		var ani = new AnimateEquation({
			aniEle:$(".message").eq(0),	//动画元素
			aniMax:150,		//最大动画值  在动画中代表元素的高
			//aniFlag:false,	//先关（run）
			widthVal:200,	//宽
			initTop:304,		//距离top
			//type:"L_T",		//动画方向 左上
			initLeft:49,	//距离左边
		});
		var messageBool = true;
		$(".clickMe").eq(0).onclick = function(e){
			if(messageBool) {
				//open
				messageBool = false;
				ani.run();
			}
			else {
				//close
				messageBool = true;
				ani.n();
			}
		}
		*/
		//写入留言
		$(".clickMe").eq(0).onclick = function(e){
			//open
			$(".message").eq(0).cssKV("display", "block");
		}
		$(".sure").eq(0).onclick = function(e){
			if($(".text").eq(0).value != "") {
				$$.cre("div").addClass("note-"+Num_ran(1, 6)+" ui-draggable text-font-style1").text($(".text").eq(0).value).appendTo($(".wall_content").eq(0)).css("left: "+Num_ran(40, 740)+"px; top: "+Num_ran(50, 420)+"px; transform: rotate("+Num_ran(-20, 20)+"deg); z-index: 6;");
				$(".message").eq(0).cssKV("display", "none");
				$(".text").eq(0).value = "";
			}else {alert("留言不能为空。");} 
		}

		var drawBool; 
		$(".wall_content").eq(0).onmousedown=function(e){
			drawBool = true;
			var currentTarget = e.target;
			var rotateVal = Num_ran(-20, 20);
		
			if(currentTarget.attr("class").indexOf("ui-draggable") != -1){
				var origLeft = currentTarget.offsetLeft;
				var origTop = currentTarget.offsetTop;
				var oX = e.clientX;
				var oY = e.clientY;
				currentTarget.onmousemove = function(e) {
					if(drawBool){
						var disX = e.clientX - oX;
						var disY = e.clientY - oY;
						var e = e || window.event;
						/*
						$(".clickMe").eq(0).text("x:"+(currentTarget.offsetLeft+disX)+
						"-y:"+(currentTarget.offsetTop+disY)+
						"<br>x:"+e.clientX+"-y:"+e.clientY);
						*/
						currentTarget.css("left: "+(currentTarget.offsetLeft+disX)+"px; top: "+(currentTarget.offsetTop+disY)+
							"px; transform: rotate(0deg); z-index: 9;");
						oX = e.clientX;
						oY = e.clientY;
					} else{
						currentTarget.cssKV("z-index", 6);
						currentTarget.cssKV("transform", "rotate("+rotateVal+"deg)");
					}
				}
			}
		}
		$(".wall_content").eq(0).onmouseup = function(e){
			drawBool = false;
        }
	</script>
 </body>
</html>